<script setup>
import {setupMapActions, setupMapMutations, setupMapState} from "@/assets/js/vuexUtils";
import NoticeDrawer from "@/components/common/NoticeDrawer.vue";
import {routeNames} from "@/router";
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessageBox} from "element-plus";
import {replaceResource} from "@/assets/js/routerUtils";

const {currentUid, clients, currentUserInfo} = setupMapState("Account", ["currentUid", "clients", "currentUserInfo"])
const {accountSwitch} = setupMapMutations("Account", ["accountSwitch"])
// 提醒消息数
const {unreadCount, totalCount} = setupMapState("Notice", ["unreadCount", "totalCount"])

const {noticeList} = setupMapActions("Notice", ['noticeList'])

const route = useRoute();
const router = useRouter()

// 用户相关路由名称
const userRoute = routeNames.user

const userPrefix = "user:";
const routePrefix = "route:";
const noticeIndex = "notice";
const searchUserIndex = "search-user";

const showNotice = ref(false);
const naviSelected = function (index) {
  // console.log(index)

  // 账号切换
  if (index.startsWith(userPrefix)) {
    const userId = index.replace(userPrefix, "")
    accountSwitch(userId)

    noticeList()
    //
    const q = {...route.query}
    q.account = userId
    router.push({query: q})
  }
  // 路由跳转
  if (index.startsWith(routePrefix)) {
    const [name, id] = index.replace(routePrefix, "").split(":")
    const params = {}
    if (id) params.id = id;
    router.push({name, params, query: {account: currentUid.value}})
  }
  if (index === noticeIndex) {
    showNotice.value = true
  }
  if (index === searchUserIndex) {
    ElMessageBox.prompt('请输入用户名', `查找用户`, {}).then(({value}) => {
      router.push({name: routeNames.user.center2, params: {name: value}, query: {account: currentUid.value}})
    }).catch(r => {
      console.log(r)
    })
  }

}

</script>

<template>
  <div>
    <el-menu
        :ellipsis="false"
        active-text-color="#ffd04b"
        background-color="#545c64"
        mode="horizontal"
        text-color="#fff"
        @select=naviSelected
    >
      <!--导航栏-->
      <el-sub-menu index="我的">
        <template #title>我的</template>
        <el-menu-item :index="`${routePrefix}${userRoute.center}:${currentUid}`">用户中心</el-menu-item>
        <el-menu-item :index="`${routePrefix}${userRoute.topic}:${currentUid}`">我的主题</el-menu-item>
        <el-menu-item :index="`${routePrefix}${userRoute.replies}:${currentUid}`">我的回复</el-menu-item>
        <el-menu-item :index="`${routePrefix}${routeNames.thread.favor}:1`">我的收藏</el-menu-item>
        <el-menu-item :index="routePrefix+routeNames.message.list">我的私信</el-menu-item>
      </el-sub-menu>
      <el-menu-item :index="routePrefix+routeNames.index">{{ routeNames.index }}</el-menu-item>
      <el-menu-item :index="routePrefix+routeNames.config">{{ routeNames.config }}</el-menu-item>
      <el-menu-item :index="routePrefix+routeNames.about">{{ routeNames.about }}</el-menu-item>
      <el-menu-item :index="searchUserIndex">找人</el-menu-item>
      <el-menu-item v-if="totalCount>0" :index="noticeIndex">消息(<span :class="unreadCount>0?'unread':'all-read'">{{ unreadCount }}</span>)</el-menu-item>
      <!--当前账号切换 -->
      <el-sub-menu v-if="currentUid && clients && currentUserInfo" index="current:user">
        <template #title>
          <el-avatar v-if="currentUserInfo.avatars && currentUserInfo.avatars[0]" :size="40"
                     :src="replaceResource(currentUserInfo.avatars[0])"/>
          {{ currentUserInfo.username }}
        </template>
        <el-menu-item v-for="item in clients.filter(u=>u.userId!==currentUid)" :index="`user:${item.userId}`">
          {{ item.username }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <!--提醒消息抽屉        -->
    <notice-drawer v-model="showNotice"/>
  </div>
</template>

<!--suppress CssUnusedSymbol -->
<style scoped>
.unread {
  font-weight: bold;
  color: red;
}

.all-read {
  font-weight: bold;
  color: green;
}
</style>